<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="tip-container">
    <span>{{'protection_disk_level_restore_tip_label' | i18n}}</span>
</div>
<div>
    <lv-form class="aui-gutter-column-md formGroup">
        <lv-form-item>
            <lv-form-label>{{'protection_selected_copy_label'|i18n}}</lv-form-label>
            <lv-form-control>
                <span>{{rowCopy.display_timestamp | date: 'yyyy-MM-dd HH:mm:ss'}}</span>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <lv-form-label lvRequired>{{'protection_restore_target_label'|i18n}}</lv-form-label>
            <lv-form-control>
                <lv-group lvGutter='8px' [lvColumns]='["365px", "110px"]'>
                    <input [ngModel]="targerLocationInput" lv-input class="restore-target-input" readOnly
                           placeholder="{{'protection_select_hcs_cloud_server_target_label' | i18n}}" />
                    <button (click)="selectRecoveryTarget()" lv-button>{{'common_restore_select_label' | i18n}}</button>
                </lv-group>
            </lv-form-control>
        </lv-form-item>
    </lv-form>
    <lv-alert lvType="warning" lvClosable="false" *ngIf="!isOriginPosition && !_isEmpty(bootOptionsWarnTip)">
        <span>{{bootOptionsWarnTip}}</span>
    </lv-alert>
    <lv-group lvGutter='24px' class="virtualization-restore-group">
        <div class="file-level-restore-tree">
            <ng-container *ngTemplateOutlet="restoreData">
            </ng-container>
        </div>
        <div class="file-level-restore-tree">
            <ng-container *ngTemplateOutlet="targetData">
            </ng-container>
        </div>
    </lv-group>
</div>

<ng-template #restoreData>
    <lv-pro-table #restoreTable [config]="restoreTableConfig" [data]="restoreTableData"></lv-pro-table>
</ng-template>

<ng-template #targetData>
    <lv-pro-table #targeTable [config]="targetTableConfig" [data]="targetTableData"></lv-pro-table>
</ng-template>

<ng-template #deskDeviceTpl let-item>
    <div *ngIf="_isEmpty(targerLocationInput)"> -- </div>
    <div *ngIf="!_isEmpty(targerLocationInput)">
        <lv-select class="disk-select" [lvOptions]="item.targetDiskOptions" lvPanelClass="openstack-restore-panel"
            [(ngModel)]="item.targetDisk" lvShowFilter lvFilterMode="contains" lvFilterKey="label"
            (ngModelChange)='diskChange($event, item)' lvValueKey='value' lvShowClear>
        </lv-select>
    </div>
</ng-template>

<ng-template #sizeTpl let-item>
    <span lv-overflow>
        {{item.extendInfo?.Capacity | capacityCalculateLabel:'1.0-0':unitconst.BYTE:false}}
    </span>
</ng-template>
